<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
          代理中的this
        */
       const target = {
        thisValEqualProxy() {
            return this === proxy
        }
       }
       const proxy = new Proxy(target, {})
       // 看以下的输出结果没有问题
       console.log(proxy.thisValEqualProxy()) // true
       console.log(target.thisValEqualProxy()) // false


       // 如果目标对象依赖于对象标识符就会出为题
       // 以下是通过mapweak创建私有变量
        const wm = new WeakMap()
        class User {
            constructor(userID) {
                wm.set(this, userID)
            }

            set id(userID) {
                console.log('set')
                wm.set(this, userID)
            }

            get id() {
                // console.log('get')
                return wm.get(this)
            }

        }
        const user = new User(123)
        console.log(user.id) // 123

        const userInstanceProxy = new Proxy(user, {})
        // 输出undefined的是因为以目标对象作为键保存了
        console.log(userInstanceProxy.id)  // undefined

        // 要解决以上输出undefined的问题,如下代码
        // 这样就可以以代理对象作为键了
        const UserInstanceProxy1 = new Proxy(User, {})
        const proxyUser = new UserInstanceProxy1(123)
        console.log(proxyUser.id)
        /**
         * 代理与内部槽位
         * */

    </script>
</body>
</html>